'use client';

import Menu from '../components/SidebarMenu';
import Header from '../components/Header';
import { Card, Typography } from 'antd';

const { Title, Paragraph } = Typography;
export default function Home() {
  return (
    <div className="flex flex-col h-screen">
      {/* 头部导航条 */}
      <Header />

      <div className="flex flex-1">
        {/* 左侧菜单 */}
        <Menu />

        {/* 主内容区域 */}
        <main className="flex-1 p-4">
          <div>
            <Title>欢迎来到首页</Title>
            <Paragraph>
              这是一个使用 Next.js App Router 路由分组功能的示例应用。
              路由分组允许你将相关路由组织在一起，同时保持 URL 结构简洁。
            </Paragraph>

            <div style={{ marginTop: 20, display: 'flex', gap: 16 }}>
              <Card title="公共区域" style={{ flex: 1 }}>
                <p>包含首页、关于页等公开访问的页面</p>
              </Card>
              <Card title="认证区域" style={{ flex: 1 }}>
                <p>包含登录、注册等身份验证相关页面</p>
              </Card>
              <Card title="用户中心" style={{ flex: 1 }}>
                <p>包含用户信息、设置等需要登录的页面</p>
              </Card>
              <Card title="内容中心" style={{ flex: 1 }}>
                <p>包含系统仪表盘内容</p>
              </Card>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}